<script lang="ts" setup>
import Item from './components/OrderItem.vue'
import {getOrders} from '@/api/order'
import XLoadMore from '@/components/XLoadMore.vue'
import type {OrderState} from '@/typings/api'
import type {IOrder} from '@/typings/interface'
import type {LoadMore} from '@/typings/components'

// 订单状态初始信息
const pageInfo = reactive({
    page: 0,
    size: 10,
    state: null as OrderState | null,
    isEnd: false,
    status: 'more' as LoadMore
})

let loading = $ref<boolean>(true) //加载状态
let orders = $ref<Array<IOrder>>([]) //订单列表

// 订单列表请求
async function setOrders(concat?: boolean) {
    // 如果接口无更多数据终止
    if (pageInfo.isEnd)
        return
    // 请求前显示加载框
    pageInfo.status = 'loading'
    // 页数加1
    pageInfo.page++
    // 接口请求
    const {data} = await getOrders(pageInfo)
    // 请求不同状态的订单列表或当前更多订单
    concat ? (orders = orders.concat(data.current_data)) : (orders = data.current_data)
    // 该次接口返回页列表长度小于默认展示长度，则停止加载更多
    pageInfo.status = 'more'
    if (data.current_data.length < pageInfo.size) {
        pageInfo.isEnd = true
        pageInfo.status = 'nomore'
    }
    // 请求成功关闭加载动画
    loading = false
}

// 切换不同订单状态列表
async function changeOrderState(OrderState: OrderState | null) {
    loading = true
    pageInfo.state = OrderState
    pageInfo.page = 0
    pageInfo.isEnd = false
    await setOrders()
}

// 订单tab的下划线动态位置切换
const lineLeft = $computed(() => {
    switch (pageInfo.state) {
        case 'CANCEL':
            return '84.5%'
        case 'NEW':
            return '32.5%'
        case 'PAY':
            return '58.5%'
        default:
            return '8.5%'
    }
})

// 首次请求数据
onLoad(() => {
    // 接口请求前的加载动画
    loading = true
    uni.showLoading({title: '加载中'})
    setOrders()
})

// 监听loading状态显示或关闭提示加载框
watch(
        () => loading,
        (newVal) => {
            if (newVal)
                uni.showLoading({title: '加载中'})
            else
                uni.hideLoading()
        }
)

// 页面滚动到底部的事件，如果还有更多数据则继续请求接口
onReachBottom(() => {
    if (pageInfo.isEnd) return
    pageInfo.status = 'more'
    setOrders(true)
})

</script>

<template>
    <view>
        <view around bg-white py-4 text="34 #2e2e2e" relative>
            <view class="line"/>
            <text :class="[!pageInfo.state && 'active']" @click="changeOrderState(null)">
                全部
            </text>
            <text :class="[pageInfo.state === 'NEW' && 'active']" @click="changeOrderState('NEW')">
                未支付
            </text>
            <text :class="[pageInfo.state === 'PAY' && 'active']" @click="changeOrderState('PAY')">
                已支付
            </text>
            <text :class="[pageInfo.state === 'CANCEL' && 'active']" @click="changeOrderState('CANCEL')">
                已取消
            </text>
        </view>
        <view gap-y-3 flex="~ col" pt-3 box-border bg="#f8f8f8">
            <Item v-for="item in orders" :order="item"/>
        </view>
        <view v-if="orders.length === 0 && !loading" center>
            <text>暂无更多订单</text>
        </view>
        <view v-else-if="!loading" bg="#f8f8f8">
            <XLoadMore :status="pageInfo.status"/>
        </view>
    </view>
</template>

<style lang="scss" scoped>
uni-page-body {
    height: 100%;
    background-color: #f8f8f8;
}

.active {
    color: #f38e48;
    font-size: 38rpx;
}

.line {
    height: 4px;
    position: absolute;
    background-color: #f38e48;
    left: v-bind(lineLeft);
    border-radius: 9999rpx;
    bottom: 20rpx;
    width: 38rpx;
    transition: left 0.3s;
}
</style>
